<template>
  <div>
    <bread-crumb
      class="bread-crumb-padding"
      :list="breadCrumb"
      :user="true"
    ></bread-crumb>
    <div class="user-main-box">
      <user-tab-list :list="tablist"></user-tab-list>
      <div class="filter-line b-b-d flx-row-s-c">
        <span class="item-name">域名注册商</span>
        <Select v-model="platform" style="width: 150px">
          <Option
            v-for="item in platformList"
            :key="item.id"
            :value="item.id"
            >{{ item.label }}</Option
          >
        </Select>
        <span class="item-name">域名品类</span>
        <Select v-model="domainType" style="width: 150px">
          <Option
            v-for="item in domainTypeList"
            :key="item.value"
            :value="item.value"
            >{{ item.name }}</Option
          >
        </Select>
        <span class="item-name">域名后缀</span>
        <Select v-model="domainSuffix" style="width: 150px">
          <Option
              v-for="item in domainSuffixList"
              :key="item.name"
              :value="item.name"
          >{{ item.name }}</Option
          >
        </Select>
        <span class="item-name">成交时间</span>
        <DatePicker
            v-model.trim="startUpTime"
            placeholder="开始时间"
            maxlength="30"
            style="width: 120px"
        />
        <div class="two-input-middle"></div>
        <DatePicker
            v-model.trim="endUpTime"
            placeholder="结束时间"
            maxlength="30"
            style="width: 120px"
        />
      </div>
      <div class="filter-line b-b-d flx-row-s-c">
        <span class="item-name">包含</span>
        <Input
          v-model.trim="name"
          placeholder="请输入关键域名词"
          style="width: 150px"
        />
        <CheckboxGroup v-model="nameLike" style="margin-left: 20px">
          <Checkbox class="radio-mg-r-20" label="0">开头</Checkbox>
          <Checkbox class="radio-mg-r-20" label="1">结尾</Checkbox>
        </CheckboxGroup>
        <span class="item-name">排除</span>
        <Input
          v-model.trim="nameExclude"
          placeholder="多个用逗号隔开"
          style="width: 150px"
        />
        <CheckboxGroup v-model="nameExcludeLike" style="margin-left: 20px">
          <Checkbox class="radio-mg-r-20" label="0">开头</Checkbox>
          <Checkbox class="radio-mg-r-20" label="1">结尾</Checkbox>
        </CheckboxGroup>
        <div
            class="user-strong-button line-button-size"
            style="margin: 0px 10px 0px 30px;"
            @click="pageChange(1)"
        >
          搜索
        </div>
        <div class="user-normal-button line-button-size" @click="reset">
          重置
        </div>
      </div>
    </div>
    <div class="user-main-box pub-m-t-20">
      <div class="filter-line search-result-line flx-row-bw-c">
        <span class="c-g f-14"
          >搜索结果共<span class="c-black"> {{ pageData.total }} </span>条</span
        >
      </div>
      <div class="relative">
        <Spin v-if="loading" :with-icon="true"></Spin>
        <table class="table-area">
          <thead>
            <tr>
              <th><div class="line-style" style="justify-content: center;min-width: 48px">序号</div></th>
              <th><div class="line-style">域名</div></th>
              <th><div class="line-style">注册商</div></th>
              <th><div class="line-style">价格</div></th>
              <th><div class="line-style">提交时间</div></th>
              <th><div class="line-style">状态</div></th>
              <th><div class="line-style">操作</div></th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in list" :key="item.id" class="lc-f">
              <td>
                <div class="line-style" style="justify-content: center;">
                  <span class="normal-f">{{ (pageData.page - 1) * pageData.limit + index + 1 }}</span>
                </div>
              </td>
              <td>
                <div class="line-style">
                  <span class="normal-f f-ell-sin">{{ item.domainName }}</span>
                </div>
              </td>
              <td>
                <div class="line-style">
                  <span class="normal-f">{{
                    item.platform | platformFilter
                  }}</span>
                </div>
              </td>
              <td>
                <div class="line-style">
                  <span class="normal-f">{{ item.tradePrice }}</span>
                </div>
              </td>
              <td>
                <div class="line-style normal-f">{{ item.tradeTime }}</div>
              </td>
              <td>
                <div class="line-style normal-f">
                  {{ item.tradeStatus | tradeStatusFilter }}
                </div>
              </td>
              <td>
                <div class="line-style normal-f">
                  <div v-if="item.platform === 1" @click="getAuthCode(item.id)" class="form-font-button">
                    获取转移码
                  </div>
                  <div v-else class="form-font-button">
                    --
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <Empty-State
          v-if="pageData.total != null && pageData.total == 0"
          style="background-color: #fff"
          content="未搜索到任何内容！"
        ></Empty-State>
        <div class="form-page-bottom-area flx-row-c-c">
          <Page
            :total="pageData.total"
            :current="pageData.page"
            :page-size="pageData.limit"
            :page-size-opts="pageSizeOpts"
            show-elevator
            show-sizer
            show-total
            @on-change="pageChange"
            @on-page-size-change="pageSizeChange"
          />
        </div>
      </div>
    </div>
    <!-- 转移码 -->
    <Modal
        class="modal-tips"
        v-model="authCodeShow"
        :mask-closable="false"
        footer-hide
        width="300"
        :sticky="true"
    >
      <div slot="header" class="modal-header">
      <span>转移码</span>
      </div>
      <div
          class="rule-content-area"
          v-html="authCode"
      ></div>
    </Modal>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getFixBuy, getFixUp, getFixDown, getAuthCode } from "@/api/user";
export default {
  name: "Successbop",
  filters: {
    numFilter(val, pageData) {
      return (pageData.page - 1) * pageData.limit + val + 1;
    },
    platformFilter(val) {
      let title = "--";
      if (val === 0) {
        title = "190";
      } else if (val === 1) {
        title = "GD";
      }
      return title;
    },
    tradeStatusFilter(val) {
      let title = "--";
      if (val === 0) {
        title = "出售中";
      } else if (val === 1) {
        title = "已拍下域名";
      } else if (val === 2) {
        title = "域名过户";
      } else if (val === 3) {
        title = "交易成功";
      }
      return title;
    },
    operationFilter(val) {
      let title = "--";
      if (val.platform === 1) {
        if (val === 1) {
          title = "获取转移码";
        }
      }
      return title;
    },
  },
  data() {
    return {
      breadCrumb: [{name: "管理中心"},{ name: "我是买家" }, { name: "购买的一口价" }],
      tablist: [
        {
          name: "购买的一口价",
          to: "/user/successbop",
        },
      ],
      classify: ["全部域名", "30天内到期", "已到期"],
      classifySelect: 0,
      waitingTime: [
        {
          name: "全部",
          select: true,
        },
        {
          name: "3月8日",
          select: false,
        },
        {
          name: "3月9日",
          select: false,
        },
        {
          name: "3月10日",
          select: false,
        },
      ],
      test: "",
      searchMethod: [],
      // 域名平台
      platform: -1,
      platformList: [
        {
          id: 0,
          label: "190",
        },
        {
          id: 1,
          label: "DG",
        },
      ],
      // 域名品类
      domainType: -1,
      domainTypeList: [],
      // 交易状态
      tradeStatus: -1,
      tradeStatusList: [
        {
          value: 0,
          name: "出售中",
        },
        {
          value: 1,
          name: "拍下域名",
        },
        {
          value: 2,
          name: "域名过户",
        },
        {
          value: 3,
          name: "交易成功",
        },
      ],
      // 域名后缀
      domainSuffix: "",
      domainSuffixList: [],
      // 成交时间
      startUpTime: "",
      endUpTime: "",
      // 域名包含
      name: "",
      nameLike: [],
      // 域名排除
      nameExclude: "",
      nameExcludeLike: [],
      // 表格加载状态
      loading: false,
      // 域名列表
      list: [],
      pageSizeOpts: [50, 100, 200],
      // 请求参数
      pageData: {
        // 域名总数
        total: 0,
        // 页码
        page: 1,
        // 分页调试
        limit: 10,
      },
      authCodeShow: false,
      authCode: ''
    };
  },
  head() {
    return {
      title: this.defaultTdk.title,
      meta: [
        { name: "keywords", content: this.defaultTdk.keywords },
        { name: "description", content: this.defaultTdk.description },
      ],
    };
  },
  computed: {
    ...mapGetters({ defaultTdk: "getDefaultTdk" }),
  },
  async mounted() {
    const data = await this.$storage.getDomainQueryTerm();
    this.domainSuffixList = data.domainSuffixList;
    this.domainTypeList = data.domainTypeList;
    this.getList();
  },
  methods: {
    getAuthCode(id) {
      this.authCodeShow = true;
      this.authCode = '';
      getAuthCode({domainFixPriceId: id}).then(res => {
        const { result, data } = res
        if(result) {
          this.authCode = data
        }
      })
    },
    // 获取列表
    async getList() {
      const params = {
        name: this.name,
        nameExclude: this.nameExclude,
        page: this.pageData.page,
        limit: this.pageData.limit,
      };
      this.platform !== -1 && (params.platform = this.platform);
      this.domainType !== -1 && (params.domainType = this.domainType);
      this.tradeStatus !== -1 && (params.tradeStatus = this.tradeStatus);
      this.domainSuffix !== "" && (params.suffix = this.domainSuffix);
      this.nameLike.length === 1 &&
        (params.nameLike = parseInt(this.nameLike[0]));
      this.nameExcludeLike.length === 1 &&
        (params.nameExcludeLike = parseInt(this.nameExcludeLike[0]));
      this.startUpTime && (params.startUpTime = this.startUpTime);
      this.endUpTime && (params.endUpTime = this.endUpTime);

      this.loading = true;
      const res = await getFixBuy(params);
      if (res.code === 200) {
        this.list = res.data.list;
        this.pageData.total = res.data.total;
      }
      this.loading = false;
    },
    // 重置
    reset() {
      this.resetSign = !this.resetSign;
      this.name = "";
      this.nameLike = [];
      this.nameExclude = "";
      this.nameExcludeLike = [];
      this.domainSuffix = "";
      this.domainType = -1;
      this.tradeStatus = -1;
      this.platform = -1;
      this.startUpTime = "";
      this.endUpTime = "";
      this.pageChange(1);
    },
    // 切换页码
    pageChange(page) {
      this.pageData.page = page;
      this.getList();
    },
    pageSizeChange(pageSize) {
      this.pageData.limit = pageSize;
      this.pageChange(1);
    },
    // 上架操作
    async fixUp(val) {
      try {
        this.loading = true;
        const { code, result } = await getFixUp({ id: val });
        this.loading = false;
        if (code === 200 && result) {
          this.$Message.success("操作成功！");
          this.getList();
        }
      } catch (error) {
        this.loading = false;
      }
    },
    async fixDown(val) {
      try {
        this.loading = true;
        const { code, result } = await getFixDown({ id: val });
        this.loading = false;
        if (code === 200 && result) {
          this.$Message.success("操作成功！");
          this.getList();
        }
      } catch (error) {
        this.loading = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.mg-r-25 {
  margin-right: 25px;
}
</style>
